import React from 'react';
import classes from 'classnames';
import styles from './index.module.scss';

const SelectItem = ({
  children,
  value,
  selected,
  onSelected,
  handleJumpToLast,
  selectedValue,
}) => {
  // selectedValue 表示外层的值
  const onToggle = () => {
    // 如果当前外层没有值 那么就正常跳下一题
    if (selectedValue === undefined) {
      onSelected(value);
    } else {
      // 当前外层有值 说明是返回上一级的结果
      handleJumpToLast(value, selectedValue);
    }
  };

  return (
    <div
      className={classes(styles.selectItem, selected && styles.selected)}
      onClick={onToggle}
    >
      {children}
    </div>
  );
};

export default SelectItem;
